<?xml version="1.0"?>
<jsp:root 	xmlns:jsp="http://java.sun.com/JSP/Page"
			xmlns:sql="http://java.sun.com/jsp/jstl/sql"
			xmlns:c="http://java.sun.com/jsp/jstl/core" 
			xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"
			version="2.1"> 
	<jsp:directive.page contentType="text/html; charset=UTF-8" />
	<jsp:directive.page isELIgnored="false" />
	<jsp:output omit-xml-declaration="false"
		doctype-root-element="html"
		doctype-public="-//W3C//DTD XHTML 1.1//EN"
		doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd" /> 
	<link href="css/main.css" rel="stylesheet" ></link> 
 		<!--  ========================  -->
        <!--  = Productos Destacados =  -->
        <!--  ========================  -->
 
        <div class="row featured-items blocks-spacer">
            <div class="span12">
                
                <!--  ==========  -->
                <!--  = Title =  -->
                <!--  ==========  -->
            	<div class="main-titles lined">
            	    <h2 class="title"><span class="light">Productos</span> Destacados</h2>
            	    <div class="arrows">
                        <a href="#" class="icon-chevron-left" id="featuredItemsLeft"><jsp:text /></a>
                        <a href="#" class="icon-chevron-right" id="featuredItemsRight"><jsp:text /></a>
                    </div>
            	</div>
            </div>
            
            <div class="span12">
                <!--  ==========  -->
                <!--  = Carousel =  -->
                <!--  ==========  -->
                <div class="carouFredSel" data-autoplay="false" data-nav="featuredItems">
                	 
                    	 <c:set var="totalProductos" scope="session" value="${productList.product.size()}"/> <!-- Total de registros -->
    					 <c:set var="porPagina" scope="session" value="3"/> <!-- Registros que quiero mostrar por página -->
    					 <c:set var="totalPaginas" scope="session" value="${(totalProductos/porPagina)+(1-((totalProductos/porPagina)%1))%1}"/> <!--Total de páginas que necesito para mostrar los productos (ceiling) -->
    					 <c:set var="pageIndex" scope="session" value="${param.start/porPagina+1}"/>
					 
    					 <c:set var="index" value="0"></c:set>
    					 
    					  <c:forEach
        					 var="producto"
        					 varStatus="status"
        					 begin="0"
        					 end="${totalProductos-1}"
        					 step="${porPagina}">
        					 
							<div class="slide">
                        		<div class="row">
                        			<c:forEach var="producto" items="${productList.product}" varStatus="loopStatus"  begin="${index }" step="1" end="${index+2 }">
	                        			<c:set var="index" value="${loopStatus.index +1}"></c:set>
	                        			<div class="span4">
				    	            	    <div class="product">
				    	            	        <div class="product-img featured">
				    	            	            <div class="picture">
				    	            	        	    <img src="${producto.imagen}" alt="${producto.nombre}" width="518" height="358" />
				    	            	        		<div class="img-overlay">
				    	            	        			<c:url var="verLink" value="/producto.jsp">
																<c:param name="oidProducto" value="${producto.oid}"/>
															</c:url>
				    	            	        		    <a href="${verLink }" class="btn more btn-primary">Ver</a>
				    	            	        		    
				    	            	        		    <a href="#" data-val="${producto.oid}" class="btn buy btn-danger">Comprar</a>
				    	            	        		</div>
				    	            	            </div>
				    	            	        </div>
				    	            	        <div class="main-titles">
				    	            	            <h4 class="title"><fmt:formatNumber type="currency" currencySymbol="€" value="${producto.precio}" /></h4>
				    	            	            <h5 class="no-margin">${producto.nombre}</h5>
				    	            	        </div>
				    	            	        <p class="desc">${producto.descripcion}</p>
				    	            	    </div>
			               	        	</div> 
			               	        	
		               	        	</c:forEach>	
                        		</div>
                        	</div>				 
    					</c:forEach> 
                </div> <!-- /carousel -->
            </div>
            
        </div>
      
    
        </jsp:root>